/**
 * margin padding top
 */
.margin-top-10 {
  margin-top: 10px !important;
}

.margin-top-20 {
  margin-top: 20px !important;
}

.margin-top-30 {
  margin-top: 30px !important;
}

.margin-top-40 {
  margin-top: 40px !important;
}

.padding-top-10 {
  margin-top: 10px !important;
}

.padding-top-20 {
  margin-top: 20px !important;
}

.padding-top-30 {
  margin-top: 30px !important;
}

.padding-top-40 {
  margin-top: 40px !important;
}

/**
 * margin padding bottom
 */
.margin-bottom-10 {
  margin-bottom: 10px !important;
}

.margin-bottom-20 {
  margin-bottom: 20px !important;
}

.margin-bottom-30 {
  margin-bottom: 30px !important;
}

.margin-bottom-40 {
  margin-bottom: 40px !important;
}

.padding-bottom-10 {
  margin-bottom: 10px !important;
}

.padding-bottom-20 {
  margin-bottom: 20px !important;
}

.padding-bottom-30 {
  margin-bottom: 30px !important;
}

.padding-bottom-40 {
  margin-bottom: 40px !important;
}

/**
 * margin padding left
 */
.margin-left-10 {
  margin-left: 10px !important;
}

.margin-left-20 {
  margin-left: 20px !important;
}

.margin-left-30 {
  margin-left: 30px !important;
}

.margin-left-40 {
  margin-left: 40px !important;
}

.padding-left-10 {
  margin-left: 10px !important;
}

.padding-left-20 {
  margin-left: 20px !important;
}

.padding-left-30 {
  margin-left: 30px !important;
}

.padding-left-40 {
  margin-left: 40px !important;
}

/**
 * margin padding right
 */
.margin-right-10 {
  margin-left: 10px !important;
}

.margin-right-20 {
  margin-left: 20px !important;
}

.margin-right-30 {
  margin-left: 30px !important;
}

.margin-right-40 {
  margin-left: 40px !important;
}

.padding-right-10 {
  margin-left: 10px !important;
}

.padding-right-20 {
  margin-left: 20px !important;
}

.padding-right-30 {
  margin-left: 30px !important;
}

.padding-right-40 {
  margin-left: 40px !important;
}

/**
 * font background color
 */
.font-red {
  color: #f36a5a !important;
}

.red {
  background: #f36a5a !important;
}

.font-blue {
  color: #69a4e0 !important;
}

.blue {
  background: #69a4e0 !important;
}

.font-hoki-blue {
  color: #32c5d2 !important;
}

.hoki-blue {
  background: #32c5d2 !important;
}

.font-black {
  color: #000 !important;
}

.black {
  background: #000 !important;
}

.font-white {
  color: #fff !important;
}

.white {
  background: #fff !important;
}

.font-yellow {
  color: #F8CB00 !important;
}

.yellow {
  background: #F8CB00 !important;
}

.font-green {
  color: #1bbc9b !important;
}

.green {
  background: #1bbc9b !important;
}

.font-grey {
  color: #999 !important;
}

.grey {
  background: #999 !important;
}

/**
 * font size
 */
.font12{
  font-size: 12px !important;
}

.font14{
  font-size: 14px !important;
}

.font16{
  font-size: 16px !important;
}

.font18{
  font-size: 18px !important;
}